import React, { useEffect, useState } from 'react'
import { DeleteOutlined, EditOutlined, VerticalAlignTopOutlined, WarningOutlined, BulbFilled } from '@ant-design/icons';
import { Table, Button, Tag, Modal, notification } from "antd"
import http from "../../../util/http"
import style from "./newsDraft.module.scss"
const { confirm } = Modal

export default function NewsDraft(props) {
    const columns = [{
        title: 'ID',
        dataIndex: 'id',
        render: (id) => {
            return <b>{id}</b>
        }
    },
    {
        title: '新闻标题',
        dataIndex: 'title',
        render: (title, item) => {
            return <a href='' className={style.title} onClick={() => toPreview(item.id)}>{title}</a>
        }
    },
    {
        title: '作者',
        dataIndex: 'author',
    },
    {
        title: '新闻分类',
        dataIndex: "category",
        render: (category) => {
            return <Tag color="magenta">{category.title}</Tag>
        }
    },
    {
        title: '操作',
        render: (item) => {
            return <span className={style.option} >
                <Button icon={<DeleteOutlined />} shape="circle" danger onClick={() => remove(item)}></Button>
                <Button icon={<EditOutlined />} shape="circle" onClick={() => {
                    props.history.push(`/news-manage/update/${item.id}`)
                }}></Button>
                <Button icon={<VerticalAlignTopOutlined />} type='primary' shape="circle" onClick={() => handleCheck(item.id)
                }></Button>
            </span >
        }
    },]
    const [dataSource, setdataSource] = useState([])
    const { username } = JSON.parse(localStorage.getItem("token"))
    useEffect(() => {
        http.get(`/news?author=${username}&auditState=0&_expand=category`).then(res => {
            setdataSource(res.data)
            // console.log(res.data)
        })
    }, [username])
    // 点击弹出消息框
    const remove = (item) => {
        confirm({
            title: '您确定要删除吗?',
            icon: <WarningOutlined />,
            onOk() {
                del(item)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    // 点击删除
    const del = (item) => {
        const delDate = dataSource.filter(data => data.id !== item.id)
        setdataSource(delDate)
        http.delete(`/news/${item.id}`)
    }
    // 点击跳转预览页面
    const toPreview = (id) => {
        // console.log(item)
        props.history.push(`/news-manage/preview/${id}`)
    }
    const handleCheck = (id) => {
        http.patch(`/news/${id}`, {
            auditState: 1
        }).then(res => {
            return props.history.push("/audit-manage/list"),
                notification.info({
                    message: `通知`,
                    description:
                        `您可以到审核列表中查看你的新闻`,
                    placement: "bottomRight",
                    style: {
                        color: '#33ff00'
                    },
                    icon: <BulbFilled style={{ color: '#ffff33' }} />
                });
        })
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                rowKey={item => item.id}
                pagination={{
                    pageSize: 7
                }}
            />
        </div>
    )
}
